<!DOCTYPE html>
<html lang="en">

<!-- Head tag -->
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Description-->
    
        <meta name="description" content="获取整个表单的数据$(‘form’).serialize()格式是字符串serializeArray()数组123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525">
    

    <!--Author-->
    
        <meta name="author" content="John Doe">
    

    <!--Open Graph Title-->
    
        <meta property="og:title" content="ajax工具函数"/>
    

    <!--Open Graph Description-->
    

    <!--Open Graph Site Name-->
    <meta property="og:site_name" content="Hexo"/>

    <!--Type page-->
    
        <meta property="og:type" content="article" />
    

    <!--Page Cover-->
    

        <meta name="twitter:card" content="summary" />
    

    <!-- Title -->
    
    <title>ajax工具函数 - Hexo</title>

    <!-- Bootstrap Core CSS -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/style.css">

    <!-- Custom Fonts -->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
    <link href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Gallery -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.css" type="text/css" rel="stylesheet" />

    <!-- Google Analytics -->
    


    <!-- favicon -->
    
	
</head>


<body>

    <!-- Menu -->
    <!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">逐风</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                
                    <li>
                        <a href="/">
                            
                                Home
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="/archives">
                            
                                Archives
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="/tags">
                            
                                Tags
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="/categories">
                            
                                Categories
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="https://github.com/klugjo/hexo-theme-clean-blog">
                            
                                <i class="fa fa-github fa-stack-2x"></i>
                            
                        </a>
                    </li>
                
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

    <!-- Main Content -->
    <!-- Page Header -->
<!-- Set your background image for this header in your post front-matter: cover -->

<header class="intro-header" style="background-image: url('http://www.codeblocq.com/assets/projects/hexo-theme-clean-blog/img/home-bg.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="post-heading">
                    <h1>ajax工具函数</h1>
                    
                    <span class="meta">
                        <!-- Date and Author -->
                        
                        
                            2017-02-18
                        
                    </span>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Post Content -->
<article>
    <div class="container">
        <div class="row">

            <!-- Tags and categories -->
           

            <!-- Gallery -->
            

            <!-- Post Main Content -->
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <p>获取整个表单的数据$(‘form’).serialize()格式是字符串<br>serializeArray()数组<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div><div class="line">93</div><div class="line">94</div><div class="line">95</div><div class="line">96</div><div class="line">97</div><div class="line">98</div><div class="line">99</div></pre></td><td class="code"><pre><div class="line">/*手动封装的ajax工具函数</div><div class="line"> * 需要什么参数？</div><div class="line"> * 请求</div><div class="line"> * 请求方式</div><div class="line"> * 请求地址</div><div class="line"> * 是否异步</div><div class="line"> * 发送数据</div><div class="line"> * 响应</div><div class="line"> * 成功之后去做什么业务</div><div class="line"> * 失败之后去做什么业务</div><div class="line"> * */</div><div class="line">/*</div><div class="line">* 使用文档：</div><div class="line">* 参数名称          参数类型          参数默认值        参数说明</div><div class="line">* type             string            get              请求的方式</div><div class="line">* url              string            当前地址         请求的地址</div><div class="line">* async            boolean           true             是否的异步的方式 false</div><div class="line">* data             object            &#123;&#125;               需要发送的数据</div><div class="line">* success          function                           成功回调函数</div><div class="line">* error            function                           失败回调函数</div><div class="line">* */</div><div class="line">/*申明一个全局变量*/</div><div class="line">window.$ = &#123;&#125;;</div><div class="line">/*在$对象里头申明一个属性指向一个叫ajax的函数*/</div><div class="line">$.ajax = function (options) &#123;</div><div class="line">    /*实现代码*/</div><div class="line">    /*options对象传参*/</div><div class="line">    if(!options || typeof options != &apos;object&apos;) return false;</div><div class="line"></div><div class="line">    /*设置默认参数*/</div><div class="line">    var type = options.type !== &apos;post&apos; ? &apos;get&apos; : &apos;post&apos;;</div><div class="line">    //pathname 属性是一个可读可写的字符串，可设置或返回当前 URL 的路径部分。</div><div class="line">    var url = options.url || location.pathname;</div><div class="line">    var async = options.async !== false ? true : false;</div><div class="line">    var data = typeof options.data == &apos;object&apos; ? options.data : &#123;&#125;;</div><div class="line"></div><div class="line">    /*发送的数据需要  键值对的字符串格式  转换一下</div><div class="line">    &#123;key:value,a:b&#125;-----&gt;key=value&amp;a=b*/</div><div class="line">    var dataString = &apos;&apos;;</div><div class="line">    for(var key in data)&#123;</div><div class="line">        dataString += key+&apos;=&apos;+data[key]+&apos;&amp;&apos;;</div><div class="line">    &#125;</div><div class="line">    /*if(dataString)&#123;</div><div class="line">        dataString = dataString.slice(0,-1);</div><div class="line">    &#125;*/</div><div class="line">    dataString = dataString &amp;&amp; dataString.slice(0,-1);</div><div class="line"></div><div class="line">    /*ajax编程*/</div><div class="line">    var xhr = new XMLHttpRequest();</div><div class="line">    /*请求*/</div><div class="line">    xhr.open(type,type==&apos;get&apos;?url+&apos;?&apos;+dataString:url,async);</div><div class="line">    if(type!=&apos;get&apos;)&#123;</div><div class="line">        xhr.setRequestHeader(&apos;Content-Type&apos;,&apos;application/x-www-form-urlencoded&apos;);</div><div class="line">    &#125;</div><div class="line">    xhr.send(type==&apos;get&apos;?null:dataString);</div><div class="line">    /*响应*/</div><div class="line">    xhr.onreadystatechange = function () &#123;</div><div class="line">        /*if(xhr.readyState == 4 &amp;&amp; xhr.status == 200)&#123;&#125;*/</div><div class="line">        if(xhr.readyState == 4)&#123;</div><div class="line">            /*通讯完成*/</div><div class="line">            if(xhr.status == 200)&#123;</div><div class="line">                /*成功*/</div><div class="line">                /*获取数据*/</div><div class="line">                /*需要和后台的数据格式对应*/</div><div class="line">                /*前后端开发的约定：Content-Type 内容的类型*/</div><div class="line">                /*Content-Type 如果包含xml返回的就xml*/</div><div class="line">                /*Content-Type 如果包含json返回的就json*/</div><div class="line">                var ct = xhr.getResponseHeader(&apos;Content-Type&apos;);</div><div class="line">                /*接收数据*/</div><div class="line">                var result = null;</div><div class="line">                if(ct.indexOf(&apos;xml&apos;) &gt; -1)&#123;</div><div class="line">                    result = xhr.responseXML;</div><div class="line">                &#125;else if(ct.indexOf(&apos;json&apos;) &gt; -1)&#123;</div><div class="line">                    var jsonString = xhr.responseText;</div><div class="line">                    result = jsonString &amp;&amp; JSON.parse(jsonString);</div><div class="line">                &#125;else&#123;</div><div class="line">                    result = xhr.responseText;</div><div class="line">                &#125;</div><div class="line">                /*给成功的业务用*/</div><div class="line">                /*调用成功回调函数*/</div><div class="line">                options.success &amp;&amp; options.success(result);</div><div class="line">            &#125;else&#123;</div><div class="line">                /*失败*/</div><div class="line">                var info = &#123;status:xhr.status,statusText:xhr.statusText&#125;;</div><div class="line">                options.error &amp;&amp; options.error(info);</div><div class="line">            &#125;</div><div class="line"></div><div class="line">        &#125;</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line">$.get = function (options) &#123;</div><div class="line">    options.type = &apos;get&apos;;</div><div class="line">    $.ajax(options);</div><div class="line">&#125;</div><div class="line">$.post = function (options) &#123;</div><div class="line">    options.type = &apos;post&apos;;</div><div class="line">    $.ajax(options);</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>jquery的ajax</p>
<p>jQuery为我们提供了更强大的Ajax封装<br>$.ajax({}) 可配置方式发起Ajax请求<br>$.get() 以GET方式发起Ajax请求<br>$.post() 以POST方式发起Ajax请求<br>$(‘form’).serialize() 序列化表单（即格式化key=val&amp;key=val）<br>url 接口地址<br>type 请求方式<br>timeout 请求超时<br>dataType 服务器返回格式<br>data 发送请求数据<br>beforeSend: function () {} 请求发起前调用<br>success 成功响应后调用<br>error 错误响应时调用<br>complete 响应完成时调用（包括成功和失败）<br>jQuery Ajax介绍<br><a href="http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp" target="_blank" rel="external">http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp</a></p>


                
            </div>

            <!-- Comments -->
            
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    


                </div>
            
        </div>
    </div>
</article>

    <!-- Footer -->
    <hr />

<!-- Footer -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <ul class="list-inline text-center">
                    

                    

                    
                        <li>
                            <a href="https://github.com/klugjo/hexo-theme-clean-blog" target="_blank">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-github fa-stack-1x fa-inverse"></i>
                                </span>
                            </a>
                        </li>
                    

                    

                    

                    
                </ul>
                <p class="copyright text-muted">&copy; 2018 John Doe<br></p>
                <p class="copyright text-muted">Original Theme <a target="_blank" href="http://startbootstrap.com/template-overviews/clean-blog/">Clean Blog</a> from <a href="http://startbootstrap.com/" target="_blank">Start Bootstrap</a></p>
                <p class="copyright text-muted">Adapted for <a target="_blank" href="https://hexo.io/">Hexo</a> by <a href="http://www.codeblocq.com/" target="_blank">Jonathan Klughertz</a></p>
            </div>
        </div>
    </div>
</footer>


    <!-- After footer scripts -->
    
<!-- jQuery -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

<!-- Bootstrap -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- Gallery -->
<script src="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

<!-- Disqus Comments -->



</body>

</html>